<template>
  <div id="main_div">
    <el-row :gutter="0">
      <el-col :span="12">
        <el-card
            style=" border-radius:0px;background:rgba(117,173,247,0.8) ;float: right; width: 600px;height: 700px;margin: 10px auto">
          <div style="color: white">
            <h1>达内天大中心09小组</h1>
            <h3>项目成员:</h3>
            <h6>2023年12月18日启动项目</h6>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="border-radius:0px;float:left; width: 600px;height: 700px;margin: 10px auto">
          <el-form label-width="100px" style="margin: 150px auto;">
            <h1 style="color: #5353fa;margin-left: -230px">注册账号</h1>
            <br>
            <br>
            <el-form-item label="手机号" size="large" style="width: 400px;margin-left: 40px">
              <el-input  placeholder="请输入手机号码" v-model="user.telephoneNumber"></el-input>
            </el-form-item>
            <el-form-item label="验证码" size="large" style="width: 400px;margin-left: 40px;">
              <el-input placeholder="请输入验证码">
                <template #append>
                  <el-button  type="primary" style="background-color: #5353fa;color: white;">获取验证码</el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="密码" size="large" style="width: 400px;margin-left: 40px">
              <el-input  type="password" placeholder="请输入密码" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item>
              <div>
                <el-checkbox v-model="radio1" :label="3" size="large">注册即表示你同意遵守<a>《服务协议》</a></el-checkbox>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button @click="reg()" style="border-radius: 0px;background-color: #5353fa;width: 340px;height: 50px"
                         type="primary">注册
              </el-button>
            </el-form-item>
            <router-link to="/login" style=" text-decoration:none;font-size: 15px;color: #5353fa;margin-left: -20px">
              已有账号,现在去登录
            </router-link>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {ref} from "vue";
import axios from 'axios';
import qs from 'qs';
import {ElMessage} from 'element-plus'
import router from "@/router";

const user=ref({telephoneNumber:"",password:""});
const radio1 = ref('1')
const reg=()=>{
  let data=qs.stringify(user.value);
  axios.post('http://localhost:8080/v1/users/reg',data)
      .then((response)=>{
        if (response.data.code==2001){
          ElMessage.success("注册成功")
          router.push('/login')
        }else{
          ElMessage.error("用户名已存在!")
        }
      })
}


</script>

<style scoped>
#main_div {
  overflow: hidden;
  height: 720px;
  background-image: url("/public/imgs/beijing.png");
  background-size: cover; /*设置封面尺寸*/
  background-position: center; /*设置背景图片居中*/

}
</style>